<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>豆咖-歌手个人界面</title>
	<link rel="stylesheet" href="assets/css/reset.css">
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/slider.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/HBSlider.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/auth.css">
	<script src="js/auth.js"></script>
	<script src="js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/layout_0412.css?max_age=25920000&amp;v=20190312">
    <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/singer_detail_59cfe684.css?max_age=25920000">
	<style id="tsbrowser_video_independent_player_style" type="text/css">
	
      .main {
	    width: 100%;
	    float: left;
	    margin-left: 120px;
	    box-sizing: border-box;
	  }
	  
      h1,h2,h3,h4 a{
		color: black;
	  }
	  
	  .mod_part{
	  	width:1100px
	  	
	  }
	  
	  .songlist__header_name,.songlist__header_album,.songlist__album{
	  	text-align:left;
	  }
	  
	  .pictureSize{
		 width:45px;
		 height:45px;
		 order: 1px solid white;
		 border-radius: 30px;
		 margin-top:5px;
  	  }
  	  .data_info__item{
  	  	float :left;
  	  	margin-right:30px;
  	  	font-size :16px;
  	  }
  	  .data__cont{
  	  	padding-top :60px
  	  }
  	  
  	  .songlist__album{
		    float: left;
		    padding-left: 15px;
		    width: 12.5%;
		    box-sizing: border-box;
		}
	  
	  .publishDate{
	  	margin-left:120px;
	  }
	  
	  .mod_page_nav {
		   
		    font-size: 14px;
		}
      </style>
<body class="os_mac">
<!-- 头部 S -->
<div class="mod_header">
        <header>
			<div class="container">
				<div class="navbar-header">
					<a href="" class="navbar-brand">
						<img src="assets/images/logo.png" alt="">
					</a>
				</div>
				<nav>
					<ul class="nav navbar-nav navbar-link" style="display: block;">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li>
							<a href="#">我的音乐</a>
						</li>
						<li class="active">
							<a href="#">歌手</a>
						</li>
						<li>
							<a href="#">排行榜</a>
						</li>
						<li>
							<a href="#">会员中心</a>
						</li>
						<li>
							<a href="#">歌曲广场</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right navbar-sm" style="display: block;">
						<li><input type="text" class="search-input" placeholder="歌名 / 歌手"></li>
						<li>
							<a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
						</li>
						<li id="loginItem">
							<a href="register_login.jsp">注册 / 登录</a>
						</li>
					</ul>
				</nav>
			</div>
		</header>
    </div>
    <!-- 头部 E -->

<div class="main">
        <div class="mod_data">
            <span class="data__cover">
                <img src="" class="data__photo" id="singerPic"></a>
            </span>
            <div class="data__cont">
                <div class="data__name">
                    <h1 class="data__name_txt js_none_index" style="display:none;">
                        <a class="js_goto_tab" data-stat="y_new.singer.thistab.singer_name" title="周杰伦" data-tab="index" href="//y.qq.com/n/yqq/singer/0025NhlN2yWrP4.html">周杰伦</a>
                    </h1>
                    <h1 class="data__name_txt js_index" id="singerName">未知歌手</h1>
                    
                </div>
                <div class="data__desc" id="singer_desc">
                   <ul class="data__info">
			  	 		<li class="data_info__item js_lan" id="singerArea">地区： 未知</li>
			   			<li class="data_info__item js_genre data_info__item--even" id="gender">性别： 未知</li>
					</ul>
                </div>
                <div class="data__actions" role="toolbar">
                    <a href="#" class="mod_btn_green js_singer_radio playAllSong"><i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲</a>
                    <a href="javascript:;" class="mod_btn js_follow" id="attentSinger"><i class="mod_btn__icon_more" id="attentionTag"></i>关注歌手</a>
                </div>
            </div>
        </div>

	<!--首页 begin-->
	<div class="js_tab" id="index_tab">
    
    <div class="mod_part">
            <div class="part__hd">
                <h2 class="part__tit">热门歌曲</h2>
            </div>
            <div class="mod_songlist">
                <ul class="songlist__header">
                    <li class="songlist__edit songlist__edit--check sprite">
                        <input type="checkbox" class="songlist__checkbox">
                    </li>
                    <li class="songlist__header_name">歌曲</li>
                    <li class="songlist__header_album">类型</li>
                    <li class="songlist__header_album">发表时间</li>
                    <li class="songlist__header_time">时长</li>
                </ul>
                <ul class="songlist__list">
                    <!-- <li mid="268352018">
                        <div class="songlist__item">
                            <div class="songlist__edit songlist__edit--check sprite">
                                <input type="checkbox" class="songlist__checkbox">
                            </div>
                            <div class="songlist__number">1</div>
                            <div class="songlist__songname">
                                <span class="songlist__songname_txt"><a href="//y.qq.com/n/yqq/song/001glaI72k8BQX.html" class="js_song" title="Mojito">Mojito</a></span>
                                <div class="mod_list_menu">
                                    <a href="//y.qq.com/portal/player.html" class="list_menu__item list_menu__play js_play" title="播放">
                                        <i class="list_menu__icon_play"></i>
                                        <span class="icon_txt">播放</span>
                                    </a>
                                    <a href="javascript:;" class="list_menu__item list_menu__add js_fav" title="添加到歌单" aria-haspopup="true" data-target="menu_add">
                                        <i class="list_menu__icon_add"></i>
                                        <span class="icon_txt">添加到歌单</span>
                                    </a>
                                        <a href="javascript:;" class="list_menu__item list_menu__down js_down" title="下载" aria-haspopup="true" data-target="menu_down">
                                            <i class="list_menu__icon_down"></i>
                                            <span class="icon_txt">下载</span>
                                        </a>
                                    <a href="javascript:;" class="list_menu__item list_menu__share js_share" title="分享" aria-haspopup="true" data-aria="menu_share">
                                        <i class="list_menu__icon_share"></i>
                                        <span class="icon_txt">分享</span>
                                    </a>
                                </div>
                            </div>
                            <div class="songlist__album">
                                    <a href="//y.qq.com/n/yqq/album/0009C3rp3Kfwg0.html" title="Mojito">Mojito</a>
                            </div>
                            <div class="songlist__time">03:05</div>
                            <div class="songlist__other">
                            </div>
                        </div>
                    </li> -->
                </ul>
                 <div class="mod_page_nav js_pager_comment" id="pageList">
			    	<a href="javascript:;" class="js_pageindex current">1</a>
			    	<!-- <strong class="more">...</strong> -->
			    	<a href="javascript:;" class="next js_pageindex" title="下一页" hidefocus="">
			    	<span>&gt;</span></a><span id="pagesDetail">共页</span>
			    </div>
            </div>
        </div>
	<!--首页 end-->
	</div>
</div>
<script type="text/javascript">
	//传入一个歌手id
	var singerId = "${param.singerId}";
	/* var loginAccount = "${sessionScope.loginAccount}"; */
	var accountId = "10";
	/* var singerId = "1"; */
	
 	var loginAccount = {
			accountId : "10",
			accountTel : "17519485014",
			accountPwd : "123456",
			accountPicture : null,
			vipStatus : "0"
		};  
	
	$(document).ready(function(){
		
		//判断用户session是否存在，存在右上角显示用户
		
		if (loginAccount != "") {
			$("#loginItem").empty();
			$("#loginItem").append("<img id=\"faceImg\" class=\"pictureSize\" src=\"${pageContext.request.contextPath}/front/img/adminpicture.jpg\"/>");
			if (singerId!="") {
				sendAjax(1);
			}
			
		}else {
			location.href = "${pageContext.request.contextPath}/front/register_login.jsp";
		}
	})
	
	//页面渲染ajax方法
	function sendAjax(pageNum) {
		//做页面渲染
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/SingerServlet",
			type:"post",
			data:{op:"getSingerDetail",singerId:singerId,pageNum:pageNum,pageSize:"8"},
			dataType:"json",
			success:function(result,status,xhr){
					if (result.data[0].singerPicture==null) {
						$("#singerPic").prop("src","${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/singerpic.jpg");
					} else {
						$("#singerPic").prop("src","${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/"+result.data[0].singerPicture);
					}
					//页面上方渲染
					$("#singerName").text(result.data[0].singerName);
					$("#singerArea").text("地区： "+result.data[0].area.areaName);
					$("#gender").text("性别： "+result.data[0].gender);
					
					//下方歌曲渲染
					$("#pageList").empty();
					$(".songlist__list").empty();
					for (var i = 0; i < result.data[0].songList.length; i++) {
						$(".songlist__list").append("<li><div class=\"songlist__item\">"+
                        		" <div class=\"songlist__edit songlist__edit--check sprite\">"+
                            	" <input type=\"checkbox\" class=\"songlist__checkbox\"></div>"+
                       		 	" <div class=\"songlist__number\">"+(i+1)+"</div><div class=\"songlist__songname\">"+
                            	" <span class=\"songlist__songname_txt\">"+
                            	" <a href=\"#\" class=\"songName\">"+result.data[0].songList[i].songName+"</a></span>"+
                            	" <div class=\"mod_list_menu\">"+
                            	" <input type=\"hidden\" class=\"playSongId\" value="+result.data[0].songList[i].songId+">"+
                                " <a href=\"#\" class=\"list_menu__item list_menu__play js_play playSong\">"+
                               	" <i class=\"list_menu__icon_play\"></i><span class=\"icon_txt\">播放</span></a>"+
                                " </div></div><div class=\"songlist__album\">"+
                        		" <a href=\"#\" class=\"songType\">"+result.data[0].songList[i].songType.typeName+"</a></div>"+
                        		" <div class=\"songlist__album publishDate\">"+result.data[0].songList[i].publishDate+"</div>"+
                        		" <div class=\"songlist__time songTime\">"+result.data[0].songList[i].songTime+"</div>"+
                       	 		" <div class=\"songlist__other\"></div></div></li>");
					}
					//分页追加
					for (var i = 1; i <= result.pages; i++) {
						if (i==result.pageNum) {
							if (i==1) {
								$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex current pageButton\">"+i+"</a>");
							}else {
								$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex current pageButton\">"+i+"</a>");
							}
						}else {
							$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex pageButton\">"+i+"</a>");
						}
					}
					//总页数和下一页追加
					$("#pageList").append(" <a href=\"javascript:;\" class=\"next js_pageindex nextPage\"><span>&gt;</span></a>"+
										" 第<span id=\"pagesTotal\" >"+result.pageNum+"</span>页&nbsp&nbsp"+
										" 共<span id=\"pagesDetail\" >"+result.pages+"</span>页");
					
			},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
	}
	
	//对页码做点击事件
	$(document).on("click",".pageButton",function(){
		var nowPage = $(this).text();
			sendAjax(nowPage);
			$("#pagesTotal").text(nowPage);
	})
	
	//下一页按钮
		$(document).on("click",".nextPage",function(){
		var nowPage = $("#pagesTotal").text();
		var maxPage = $("#pagesDetail").text();
		if (nowPage<maxPage) {
			sendAjax(nowPage*1+1);
			$("#pagesTotal").text(nowPage*1+1);
		}
	})
	
	//点击歌曲名进入歌曲详情页面
	$(document).on("click",".songName",function(){
		var songId = $(this).parent().next().children("input").val();
		window.open("${pageContext.request.contextPath}/front/comment.jsp?songId="+songId);
	})
	
	//播放歌手全部歌曲
	$(".playAllSong").click(function(){
		//获取全部列表歌曲的id
		var playSongId = $(".playSongId");
		for (var i = 0; i < playSongId.length; i++) {
			var songId = $(playSongId[i]).val();
			//判断是否被收藏了
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/PlayListServlet",
				type:"post",
				data:{op:"existPlayList",songId:songId,accountId:accountId},
				dataType:"text",
				success:function(result,status,xhr){
					console.log(123)
					//未添加到播放列表
					if ("yesPlay"!=result) {
						$.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/PlayListServlet",
							type:"post",
							data:{op:"addPlayList",songId:result,accountId:accountId},
							dataType:"text",
							success:function(result,status,xhr){
								},
								error:function(xhr,status,error){
									alert("ajax异步请求失败1");
								}
							});
						}else if ("yesPlay"==result) {
							
						}
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败2");
					}
				});
		}
		window.open("${pageContext.request.contextPath}/front/play.jsp");
	})
	
	//歌曲背后播放按钮
	$(document).on("click",".playSong",function(){
		var songId = $(this).prev().val();
		//判断是否被收藏了
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/PlayListServlet",
			type:"post",
			data:{op:"existPlayList",songId:songId,accountId:accountId},
			dataType:"text",
			success:function(result,status,xhr){
				//未添加到播放列表
				if ("yesPlay"!=result) {
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/PlayListServlet",
						type:"post",
						data:{op:"addPlayList",songId:result,accountId:accountId},
						dataType:"text",
						success:function(result,status,xhr){
							if ("addyes"==result) {
									alert("添加到播放列表成功")
									window.open("${pageContext.request.contextPath}/front/play.jsp?songId="+songId);
							}else if ("addno"==result) {
									alert("添加到播放列表失败");
								}
							},
							error:function(xhr,status,error){
								alert("ajax异步请求失败");
							}
						});
					}else if ("yesPlay"==result) {
						window.open("${pageContext.request.contextPath}/front/play.jsp");
					}
				},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
	})
	
	$("#attentSinger").click(function(){
		//判断是否已关注
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/AttentionServlet",
			type:"post",
			data:{op:"existAttention",singerId:singerId,accountId:accountId},
			dataType:"text",
			success:function(result,status,xhr){
				if ("noAttention"==result) {
					//做添加关注
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/AttentionServlet",
						type:"post",
						data:{op:"addAttention",singerId:singerId,accountId:accountId},
						dataType:"text",
						success:function(result,status,xhr){
								if ("addYes"==result) {
									$("#attentionTag").removeClass("mod_btn__icon_more");
									$("#attentionTag").addClass("mod_btn__icon_yes");
								}
							},
							error:function(xhr,status,error){
								alert("ajax异步请求失败");
							}
						});
				}else if ("yesAttention"==result) {
						//做取消关注
						$.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/AttentionServlet",
							type:"post",
							data:{op:"deleteAttention",singerId:singerId,accountId:accountId},
							dataType:"text",
							success:function(result,status,xhr){
									if ("deleteYes"==result) {
										$("#attentionTag").addClass("mod_btn__icon_more");
										$("#attentionTag").removeClass("mod_btn__icon_yes");
									}
								},
								error:function(xhr,status,error){
									alert("ajax异步请求失败");
								}
							});
					}
				},
				error:function(xhr,status,error){
					alert("ajax异步请求失败");
				}
			});
	})
</script>
</body>
</html>
